<template>
  <div class="city-features">
    <!-- 主要内容区域 -->
    <main class="main-content">
      <!-- 页面标题 -->
      <section class="page-title">
        <h1>城市特色</h1>
        <p>探索不同城市的独特魅力，发现值得去的地方</p>
      </section>

      <!-- 搜索和筛选区域 -->
      <section class="search-filter-section">
        <div class="search-box">
          <span class="search-icon">🔍</span>
          <input 
            type="text" 
            v-model="searchQuery" 
            placeholder="搜索城市..." 
            class="search-input"
          >
        </div>
        <div class="filter-options">
          <button 
            v-for="filter in filters" 
            :key="filter.value"
            :class="['filter-btn', { active: activeFilter === filter.value }]"
            @click="setActiveFilter(filter.value)"
          >
            {{ filter.label }}
          </button>
        </div>
        <div class="wishlist-toggle">

          <button class="wishlist-btn" @click="goToWishlist">我的心愿清单</button>
         </div>
      </section>

      <!-- 城市卡片网格 -->
      <section class="cities-grid">
        <div 
          v-for="city in filteredCities" 
          :key="city.id"
          class="city-card"
          @click="goToCityDetail(city.id)"
        >
          <div class="city-image">
            <img :src="city.image" :alt="city.name" loading="lazy">
            <div class="city-overlay">
              <span class="city-rating">⭐ {{ city.rating }}</span>
            </div>
          </div>
          <div class="city-info">
            <h3 class="city-name">{{ city.name }}</h3>
            <p class="city-description">{{ city.description }}</p>
            <div class="city-tags">
              <span 
                v-for="tag in city.tags" 
                :key="tag"
                :class="['tag', getTagClass(tag)]"
              >
                {{ tag }}
              </span>
            </div>
            <!-- 删除了城市统计信息部分 -->
          </div>
        </div>
      </section>

      <!-- 加载更多 -->
      <section v-if="showLoadMore" class="load-more-section">
        <button class="load-more-btn" @click="loadMoreCities">
          加载更多城市
        </button>
      </section>
    </main>
  </div>
</template>

<script>
import { getCities } from '../../api/city'
import { getWishlist } from '../../api/wishlist'
import { authUtils } from '../../utils/auth'
export default {
   name: 'CityList',
   data() {
     return {
       searchQuery: '',
       activeFilter: 'all',
       displayedCount: 6,
       wishlistOnly: false,
       wishlistIds: [],
       filters: [
         { label: '全部', value: 'all' },
         { label: '美食', value: 'food' },
         { label: '文化', value: 'culture' },
         { label: '自然', value: 'nature' },
         { label: '历史', value: 'history' }
       ],
      cities: []
     }
   },
   mounted() {
    this.loadWishlist();
    this.fetchCities();
   },
   computed: {
     filteredCities() {
       let result = this.cities;
       
       // 根据搜索查询过滤
       if (this.searchQuery) {
         const query = this.searchQuery.toLowerCase();
         result = result.filter(city => 
           city.name.toLowerCase().includes(query) || 
           city.description.toLowerCase().includes(query) ||
           city.tags.some(tag => tag.toLowerCase().includes(query))
         );
       }

       // 心愿单筛选
       if (this.wishlistOnly) {
         result = result.filter(city => this.wishlistIds.includes(city.id))
       }
       
       // 限制显示数量
       return result.slice(0, this.displayedCount);
     },
     showLoadMore() {
       return this.displayedCount < this.cities.length;
     }
   },
   methods: {
    mapFilterToTag(filter) {
      const map = {
        food: '美食',
        culture: '文化',
        nature: '自然',
        history: '历史',
      }
      return map[filter] || undefined
    },
    async fetchCities() {
      try {
        const tag = this.activeFilter === 'all' ? undefined : this.mapFilterToTag(this.activeFilter)
        const params = {}
        if (tag) params.tag = tag
        const list = await getCities(params)
        this.cities = Array.isArray(list) ? list : []
      } catch (e) {
        console.error('获取城市列表失败:', e)
        this.cities = []
      }
    },
     setActiveFilter(filter) {
       this.activeFilter = filter;
       this.displayedCount = 6;
       // 服务端按标签过滤
       this.fetchCities();
     },
     loadWishlist() {
       const fallback = () => {
         try {
           const raw = localStorage.getItem('cityWishlist')
           const arr = JSON.parse(raw || '[]')
           this.wishlistIds = Array.isArray(arr) ? arr : []
         } catch (e) {
           this.wishlistIds = []
         }
       }
       if (authUtils.isLoggedIn()) {
         getWishlist()
           .then(ids => {
             this.wishlistIds = Array.isArray(ids) ? ids : []
           })
           .catch(err => {
             console.error('获取心愿单失败:', err)
             fallback()
           })
       } else {
         fallback()
       }
       },
       getTagClass(tag) {
       const tagMap = {
         '美食': 'food',
         '火锅': 'food',
         '文化': 'culture',
         '历史': 'culture',
         '古迹': 'culture',
         '古城': 'culture',
         '自然': 'nature',
         '湖泊': 'nature',
         '雪山': 'nature',
         '海岛': 'nature',
         '休闲': 'leisure',
         '浪漫': 'romance',
         '夜景': 'night',
         '魔幻': 'magic',
         '熊猫': 'panda'
       };
       return tagMap[tag] || '';
     },
     goToCityDetail(cityId) {
       // 跳转到城市详情页
       this.$router.push(`/city/${cityId}`);
     },
    goToWishlist() {
      this.$router.push('/my-wishlist')
    },
     loadMoreCities() {
       this.displayedCount += 3;
     }
   }
 }
</script>

<style scoped>
.city-features {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 页面标题 */
.page-title {
  margin-bottom: 30px;
}

.page-title h1 {
  font-size: 32px;
  color: #333;
  margin-bottom: 10px;
}

.page-title p {
  color: #666;
  font-size: 16px;
}

/* 搜索和筛选 */
.search-filter-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  gap: 20px;
  flex-wrap: wrap;
}

.search-box {
  flex: 1;
  min-width: 300px;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 12px 20px 12px 45px;
  border: 1px solid #ddd;
  border-radius: 30px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.search-input:focus {
  border-color: #ff7e5f;
  box-shadow: 0 0 0 2px rgba(255, 126, 95, 0.1);
}

.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.filter-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 10px 20px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.filter-btn:hover {
  border-color: #ff7e5f;
  color: #ff7e5f;
}

.filter-btn.active {
  background: #ff7e5f;
  color: white;
  border-color: #ff7e5f;
}

/* 城市卡片网格 */
.cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.city-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.city-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.city-image {
  height: 180px;
  overflow: hidden;
  position: relative;
}

.city-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.city-card:hover .city-image img {
  transform: scale(1.05);
}

.city-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.city-info {
  padding: 20px;
}

.city-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.city-description {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.city-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 15px;
}

.tag {
  background: #f0f7ff;
  color: #4a90e2;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
}

.tag.food {
  background: #fff0f0;
  color: #ff7e5f;
}

.tag.culture {
  background: #f0fff4;
  color: #4caf50;
}

.tag.nature {
  background: #f0f8ff;
  color: #2196f3;
}

.tag.leisure {
  background: #fff8e1;
  color: #ff9800;
}

.tag.romance {
  background: #fce4ec;
  color: #e91e63;
}

.tag.night {
  background: #212121;
  color: #bb86fc;
}

.tag.magic {
  background: #7b1fa2;
  color: white;
}

.tag.panda {
  background: #000;
  color: white;
}

/* 删除了城市统计信息样式 */

/* 加载更多 */
.load-more-section {
  text-align: center;
  margin: 30px 0;
}

.load-more-btn {
  padding: 12px 30px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 25px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

.load-more-btn:hover {
  background: #ff7e5f;
  color: white;
  border-color: #ff7e5f;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-filter-section {
    flex-direction: column;
  }
  
  .search-box {
    min-width: 100%;
  }
  
  .cities-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}

@media (max-width: 480px) {
  .city-features {
    padding: 15px;
  }
  
  .cities-grid {
    grid-template-columns: 1fr;
  }
}
.wishlist-toggle {
  /* 保持现有布局 */
}
.wishlist-btn {
  padding: 10px 16px;
  border: 1px solid #ff8a65;
  border-radius: 8px;
  color: #ff8a65;
  background: #fff;
  cursor: pointer;
}
.wishlist-btn:hover {
  background: #fff5f0;
}

</style>